import 'dart:math';

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import '../../common/utils/toast.dart';
import '../../ui/widget/loading.dart';

class FeedbackScreen extends StatefulWidget {
  const FeedbackScreen({super.key});

  @override
  State<FeedbackScreen> createState() => _ContactScreemnState();
}

class _ContactScreemnState extends State<FeedbackScreen> {
  final List<String> subjects = [
    'Issues',
    'Performance',
    'Features',
    'Others',
  ];

  final TextEditingController controller = TextEditingController();

  bool showLoading = false;
  late String currentSubject = subjects.first;
  String currentMessage = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          onTap: () {
            context.pop();
          },
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Icon(Icons.arrow_back_ios, color: Colors.white),
          ),
        ),
        title: const Text('Feedback', style: TextStyle(fontSize: 18)),
      ),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    "In app feedback or user's feedback is a prominent part of any app development process. now, with the in app feedback option, you give your app users the freedom of sharing their experience instantly. user app experince share the issue performance any kind if share to write a message and submit send instanly.",
                    style: TextStyle(
                        fontSize: 12,
                        color: Colors.white,
                        fontFamily: 'medium'),
                  ),
                  const SizedBox(height: 10),
                  const Text(
                    "Subjects",
                    style: TextStyle(
                        fontSize: 14,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10),
                  SizedBox(
                    height: 30,
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: subjects.map(subject).toList(),
                    ),
                  ),
                  const SizedBox(height: 15),
                  buildMessage(),
                  const SizedBox(height: 15),
                  Row(
                    children: [
                      Expanded(
                        child: ElevatedButton(
                          onPressed: () async {
                            final body = controller.text;
                            if (body.isEmpty) {
                              showToast('Please enter message');
                              return;
                            }
                            // Handle Submit
                            setState(() {
                              showLoading = true;
                            });
                            final delay = Random().nextInt(3000) + 1000;
                            await Future.delayed(Duration(milliseconds: delay));
                            setState(() {
                              showLoading = false;
                            });
                            if (!context.mounted) {
                              return;
                            }
                            context.pop();
                            showToast('Thanks for your support!');
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: const Color(0xff4744d3),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                          ),
                          child: const Text(
                            "Submit",
                            style: TextStyle(fontSize: 13, color: Colors.white),
                          ),
                        ),
                      ),
                      const SizedBox(width: 16),
                      Expanded(
                        child: ElevatedButton(
                          onPressed: () {
                            // Handle Clear
                            controller.text = '';
                            setState(() {});
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: const Color(0xff4744d3),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                          ),
                          child: const Text(
                            "Clear",
                            style: TextStyle(fontSize: 13, color: Colors.white),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          if (showLoading) const Center(child: LoadingWidget()),
        ],
      ),
    );
  }

  Widget subject(String title) {
    return ElevatedButton(
      onPressed: () {
        // Handle Issues
        currentSubject = title;
        setState(() {});
      },
      style: ElevatedButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        backgroundColor: currentSubject == title
            ? const Color(0xff4744d3)
            : Colors.transparent,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
      ),
      child: Container(
        height: 30,
        alignment: Alignment.center,
        child: Text(
          title,
          style: const TextStyle(
            fontSize: 12,
            color: Colors.white,
            overflow: TextOverflow.visible,
          ),
        ),
      ),
    );
  }

  Widget buildMessage() {
    return TextField(
      controller: controller,
      style: const TextStyle(fontSize: 13, color: Colors.white),
      maxLines: 3,
      onChanged: (text) {
        currentMessage = text;
      },
      cursorColor: const Color(0xff4744d3),
      textInputAction: TextInputAction.done,
      decoration: InputDecoration(
        hintText: "Type Message Here..",
        hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Color(0xff4744d3)),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Color(0xff4744d3)),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Color(0xff4744d3)),
        ),
        filled: true,
        fillColor: Colors.white.withOpacity(0.1),
        contentPadding: const EdgeInsets.all(10),
      ),
    );
  }
}
